<template>
    <div class="wrapper">
        <Header name="我的钱包" />
        <span @click="toTransaction(wallet.walletId)" id="transaction">账单明细</span>

        <div id="balance" class="card">
            <img src="../assets/img/virtualwallet/余额.svg">
            我的余额
            <div style="font-size: 9vw;">&yen{{ wallet.balance }}</div>
        </div>
        <div @click="toNotFound()" id="yuetong">
            转入余额通，能赚又能花 &gt;
        </div>

        <input id="inputRecharge" v-model="rechargeAmount" placeholder="输入充值金额" name="text">
        <div @click="toRecharge()" id="recharge" class="card">
            充值
        </div>

        <input id="inputWithdraw" v-model="withdrawAmount" placeholder="输入提现金额" name="text">
        <div @click="toWithdraw()" id="withdraw" class="card">
            提现
        </div>

        <div id="reference1">
            常见问题
        </div>
        <div id="reference2">
            本服务由DLR提供
        </div>
    </div>
</template>

<script>
import Header from '../components/Header.vue';
export default {
    name: "VirtualWallet",

    data() {
        return {
            user: {},
            wallet: {
                // walletId: '',
                // userId: '',
                // createTime: '',
                // balance: '',
            },
            balance: {},
            rechargeAmount: '',
            withdrawAmount: '',
        }
    },
    created() {
        this.user = this.$getSessionStorage('user');
        let url = `VirtualWalletController/getWallet/${this.user.userId}`
        this.$axios.get(url).then(response => {
            this.wallet = response.data.result;
        }).catch(error => {
            console.error(error);
        });
    },
    methods: {
        toTransaction(walletId) {
            this.$router.push({ path: '/transaction', query: { walletId: this.wallet.walletId } })
        },

        toRecharge() {
            if (this.rechargeAmount == '') {
                alert("未输入充值金额，无法充值！");
                return;
            }

            // let predict_balance = parseFloat(this.wallet.balance) + parseFloat(this.rechargeAmount)
            // if (predict_balance > 1000) {
            //     alert("总余额将超过上限1000，无法充值！");
            //     return;
            // }
            let url = `VirtualWalletController/wallets/${this.wallet.walletId}/userId/${this.user.userId}/rechargeAmount/${this.rechargeAmount}`
            this.$axios.put(url).then(response => {
                if (response.data.result > 0)
                    alert("充值成功！");
                this.$router.go(0);
            }).catch(error => {
                console.error(error)
            })
        },

        toWithdraw() {
            if (this.withdrawAmount == '') {
                alert("未输入提现金额，无法取现！")
                return
            }

            if (this.wallet.balance < this.withdrawAmount) {
                alert("余额不足，无法取现！");
                return;
            }

            let url = `VirtualWalletController/wallets/${this.wallet.walletId}/userId/${this.user.userId}/withdrawAmount/${this.withdrawAmount}`
            this.$axios.put(url).then(response => {
                if (response.data.result > 0)
                    alert("取现成功！");
                this.$router.go(0);
            }).catch(error => {
                console.error(error)
            })
        },

        toNotFound() {
            this.$router.push({ path: '/error403' });
        },

        goBack() {
            this.$router.go(-1);
        }
    },
    computed: {
        // getCurreny() {
        //     this.$axios.post('CurrencyController/getCurrencyByUserId', this.$qs.stringify({
        //         userId: this.user.userId,
        //     })).then(response => {
        //         this.curreny = response.data;
        //         for (let index in this.currency) {
        //             console.log(this.currency[index]);
        //         }
        //     }).catch(error => {
        //         console.error(error);
        //     })
        // }
    },
    components: {
        Header,
    }
}
</script>

<style scoped>
.wrapper {
    width: 100%;

    /* justify-content: center; */
    text-align: center;

    /* position: fixed; */
    /* background-color: rgb(248, 248, 250); */
}

.wrapper #transaction {
    /* width: 200px; */
    position: fixed;
    z-index: 850;
    font-size: 4.5vw;
    top: 15vw;
    right: 3vw;
}

.wrapper #balance {
    width: 50vw;
    height: 40vw;
    margin: 16vw auto 0;
    border: 0;
}

.wrapper #balance img {
    width: 11.5vw;
    margin: 5vw auto;
}

#yuetong {
    height: 5vw;
    font-size: 3.5vw;
    margin: 5vw auto 0;
    color: #ed9e58;
}

#inputRecharge {
    margin: 25vw auto 0;
    border-radius: 5px;
    z-index: 3;
}

.wrapper #recharge {
    width: 47vw;
    height: 10vw;
    margin: 1vw auto 1vw;
    justify-content: center;
    color: rgb(245, 245, 245);
    background-color: rgb(88, 190, 107);
}


#inputWithdraw {
    margin: 3vw auto 0;
    border-radius: 5px;

    z-index: 3;
}

.wrapper #withdraw {
    width: 47vw;
    height: 10vw;
    margin: 1vw auto;
    justify-content: center;
    color: rgb(88, 190, 107);
    background-color: rgb(245, 245, 245);

}

.wrapper #reference1 {
    height: 5vw;
    font-size: 3.2vw;
    font-weight: bold;
    margin: 7vw auto 0;
    color: rgb(103, 114, 169);
}

.wrapper #reference2 {
    height: 5vw;
    font-size: 3.1vw;
}
</style>